<template>
	<view>
		<view style="margin-bottom: 80rpx; margin-top: 150rpx;">
			<!-- //步进器 -->
			<!-- <Setps :num='0' :headtitle='headtext' :tit='tit' /> -->
			<view class="formcard" v-if="travelTrip==1">
				<view class="bodtitle" style='border-bottom: none;display: flex;justify-content: space-between;'>
					<p style='flex: 3;'><b>是否取消出差</b><span style='color: red;'><b>*</b></span></p>
					<radio-group style="display: flex;justify-content: space-between;flex: 2;">
						<label v-for="(item, index) in items" :key="item.value">
							<view>
								<radio @click="radioChange(item.value)" style="transform: scale(.7);"
									:value="item.value" :checked="index == isCancel" />
								<view style="display: inline-block;padding-right: 10rpx;">
									<p>{{item.name}}</p>
								</view>
							</view>
						</label>
					</radio-group>
				</view>
			</view>
			<!-- 多行文本 -->
			<view class="formcard" v-show="travelTrip== 1">
				<view class="bodtitle" style="border-bottom: none;">
					<p><b>变更说明<span style='color: red;'><b>*</b></span></b></p>
				</view>
				<view class="textarea" style="padding: 20rpx 20rpx;" id="changeReasion"
					:style="{border:voideText == 'changeReasion'?'1px solid #539ce7b3':''}">
					<u--textarea maxlength='100' count v-model="travelAppList.changeReasion" border='none'
						placeholder="请输入出差变更原因"></u--textarea>
				</view>
			</view>
			<view class="formcard">
				<view class="bodtitle">
					<p><b>基本信息</b></p>
				</view>
				<u-form labelPosition="left" :model="travelAppList" ref="fromDate">
					<!-- 申请单号 -->
					<u-form-item labelWidth="200rpx" label="申请单号" prop="busiTripNo" borderBottom ref="item1">
						<input disabled class="pdlf" type="text" v-model="travelAppList.busiTripNo" placeholder="系统生成">
					</u-form-item>

					<!-- 申请人 -->
					<u-form-item labelWidth="200rpx" label="申请人" prop="empNm" borderBottom ref="item2"
						@click="personClick(2)">
						<input class="pdlf" type="text" v-model="travelAppList.empNm" disabled>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>

					<!-- 员工编号 -->
					<u-form-item labelWidth="200rpx" label="员工编号" prop="empNo" borderBottom ref="item3">
						<input disabled class="pdlf" type="text" v-model="travelAppList.empNo" disabled>
					</u-form-item>

					<!-- 所在科室 -->
					<u-form-item labelWidth="200rpx" label="所在科室" prop="subdeptNm" borderBottom ref="item4">
						<input disabled class="pdlf" type="text" v-model="travelAppList.subdeptNm">
					</u-form-item>

					<!-- 出差地域 -->
					<!-- <u-form-item required labelWidth="200rpx" label="出差地域" prop="destination" borderBottom>
						<u-radio-group slot='right' v-model="travelAppList.destination" placement="row">
							<u-radio :customStyle="{marginLeft: '60rpx'}" v-for="(item, index) in addresslist"
								:key="index" :label="item.name" :name="item.val">
							</u-radio>
						</u-radio-group>
					</u-form-item> -->

					<!-- 出差类型 -->
					<u-form-item required labelWidth="200rpx" label="出差类型" borderBottom prop="tripType">
						<u-radio-group slot='right' v-model="travelAppList.tripType" placement="row">
							<u-radio :customStyle="{marginLeft: '60rpx'}" v-for="(item, index) in tripTypelist"
								:key="index" :label="item.name" :name="item.val">
							</u-radio>
						</u-radio-group>
					</u-form-item>

					<!-- 出差日期 -->
					<u-form-item required borderBottom labelWidth="200rpx" label="出差日期" id="date"
						:style="{border:voideText == 'date'?'1px solid #539ce7b3':''}">

						<!-- <u-calendar @close="close()" :show="dateshow" :mode="mode" @confirm="date_confirm"></u-calendar> -->
						<uni-datetime-picker class="pdlf" :startTime="'08:30:00'" :endTime="'17:30:00'" :start="rangeStartDate"
							type="datetimerange" @change="dateConfirm" :clear-icon="false" :border="false">
							<view class="" slot="date">
								<input @click="dateshow= true" v-if="isdate" class="pdlf" type="text" disabled
									placeholder="请选择出差时间">
								<view style="display: flex;align-items: center;" v-else @click="dateshow= true">
									<view style="flex: 2;">
										<label>{{travelAppList.startDate}}</label>
									</view>
									<view style="flex: 1;">
										共{{day}}天
									</view>
									<view style="flex: 2;">
										<label>{{travelAppList.endDate}}</label>
									</view>
								</view>
							</view>
						</uni-datetime-picker>

					</u-form-item>

					<!-- 是否入住酒店 -->
					<u-form-item borderBottom required labelWidth="215rpx" label="是否入住酒店">
						<u-switch v-model="isCheckHotel" size="20"
							@change="switchSelection(isCheckHotel,'isCheckHotel')"></u-switch>
					</u-form-item>

					<!-- 同行人数 -->
					<!-- <u-form-item labelWidth="200rpx" label="同行人数" borderBottom>
						<input class="pdlf" type="number" v-model="travelAppList.peersNum" disabled=""
							placeholder="填写行程自动带出">
					</u-form-item> -->

					<!-- 是否携带电脑 -->
					<u-form-item borderBottom required labelWidth="215rpx" label="是否携带电脑">
						<u-switch v-model="isWithComputer" size="20"
							@change="switchSelection(isWithComputer,'isWithComputer')"></u-switch>
					</u-form-item>

					<!-- 台数 -->
					<u-form-item required borderBottom labelWidth="215rpx" label="台数" id="computerStations"
						:style="{border:voideText == 'computerStations'?'1px solid #539ce7b3':''}" v-if="travelAppList.isWithComputer==1 ? true : false">
						<input class="pdlf" type="number"
							@click="travelAppList.isWithComputer==1?'':iswicth()"
							v-model="travelAppList.computerStations" placeholder="请输入台数">
					</u-form-item>

					<!-- 携带人 -->
					<!-- <u-form-item required borderBottom labelWidth="215rpx" label="携带人" id="computerEmpNm"
						:style="{border:voideText == 'computerEmpNm'?'1px solid #539ce7b3':''}"
						v-if="travelAppList.isWithComputer==1 ? true : false"
						@click="travelAppList.isWithComputer==1?personClick(1):iswicth()">
						<input type="text" v-model="travelAppList.computerEmpNm" disabled class="pdlf"
							placeholder="请选择携带人">
						<u-icon v-if="travelAppList.isWithComputer==1" slot="right" name="arrow-right"></u-icon>
					</u-form-item> -->

					<!-- 出差地址 -->
					<u-form-item borderBottom required labelWidth="215rpx" label="出差地址" prop="tripObjective"
						id="tripObjective" :style="{border:voideText == 'tripObjective'?'1px solid #539ce7b3':''}">
						<input class="pdlf" type="text" v-model="travelAppList.tripObjective" placeholder="请填写出差地址">
					</u-form-item>

					<!-- 多行文本 -->
					<view class="textarea">
						<view id="tripReasion" :style="{border:voideText == 'tripReasion'?'1px solid #539ce7b3':''}">
							<p>出差事由<label style="color:red">*</label></p>
							<u-form-item style='font-size: red;' labelWidth="200rpx" prop="tripReasion" borderBottom
								ref="item7">
								<u--textarea maxlength='200' count v-model="travelAppList.tripReasion" border='none'
									placeholder="请输入明确化出差事由"></u--textarea>

							</u-form-item>
						</view>
						<uploads fileType="CCSQ" v-model="travelAppList.fileNo"></uploads>
					</view>

				</u-form>
			</view>

			<!-- <view class="bottom_setup">
				<view @click="nextapp" class="bottom_white">
					<u-button class="custom-style" type="primary" text="下一步(行程计划)"></u-button>
				</view>
			</view> -->

		</view>
	</view>
</template>

<script>
	import Setps from '@/workspaces/tools/setps.vue'
	import uploads from '@/workspaces/components/uni-updata/uploads.vue'
	export default {
		props: ['list', 'travelTrip'],
		data() {
			return {
				isCancel: 1,
				items: [{
						value: '0',
						name: '是',
					},
					{
						value: '1',
						name: '否'
					}
				],
				datetimerange: ["08:30:00", "20:30:00"],
				range: [],
				rangeStartDate: "",
				travelAppList: {}, //出差申请基本信息
				isCheckHotel: false, //是否入住酒店
				isWithComputer: false, //是否携带电脑
				//开始日期选择
				dateshow: false,
				mode: 'multiple',
				isdate: true,
				voideText: '',
				value1: '',
				numa: 0, //步进器第几步，
				//地域单选框
				// addresslist: [{
				// 		name: '境内',
				// 		val: '0'
				// 	},
				// 	{
				// 		name: '境外',
				// 		val: '1'
				// 	},
				// ],
				//出差类型
				tripTypelist: [{
						name: '当天',
						val: '0'
					},
					{
						name: '国内',
						val: '1'
					},{
						name: '国外',
						val: '2'
					},
				],
				// 默认选中
				addressradio: '境内',
				// 默认选中
				classradio: '境内',
				day: 0, //出差天数
				appId: "",
				wiid: "",
				formAction: "",
				taskId: "",
				wfContext: {},
				isReadOnly: false,
			}
		},
		components:{
			Setps,
			uploads
		},
		mounted() {
			let _this = this;
			window.myvm = _this;
			window.$urlFormVue = _this;
			_this.travelAppList = _this.list;
			_this.isCheckHotel = _this.travelAppList.isCheckHotel == '1' ? true : false;
			_this.isWithComputer = _this.travelAppList.isWithComputer == '1' ? true : false;
			if (_this.travelAppList.isCancel) {
				_this.isCancel = _this.travelAppList.isCancel == '0' ? 1 : 0
			}
			if (_this.travelAppList.startDate && _this.travelAppList.endDate) {
				_this.isdate = false;
				_this.day = _this.getDistanceDays(_this.travelAppList.startDate, _this.travelAppList.endDate);
			}
			_this.rangeStartDate= _this.$oacommon.getNewDate(true, 'YMD').retTwo;
			
			//获取流程页面的流程上下文[实用的流程信息从这里获取]
			_this.wfContext = window.parent.myvm.wfContext;
			console.info(_this.wfContext);
			//流程应用定义ID
			var appId = Object.toQueryString("appId") || "";
			//流程实例ID
			var wiid = Object.toQueryString("wiid") || "";
			if (wiid == "") {
			  wiid = _this.wfContext.WorkflowInstanceId;
			}
			//  当前页面状态：0未有实例，2待办，3查看,4待阅
			var formAction = Object.toQueryString("formAction") || 0;
			//待办任务ID，待办时才有此参数
			var taskId = Object.toQueryString("taskId") || "";
			if (formAction > 2) {
			  _this.isReadOnly = true;
			}
			_this.appId = appId;
			_this.wiid = wiid;
			_this.formAction = formAction;
			_this.taskId = taskId;
		},
		watch: {
			travelTrip(val) {
				if (val == 1) {
					let _this = this;
					_this.travelAppList = _this.list;
					_this.isCheckHotel = _this.travelAppList.isCheckHotel == '1' ? true : false;
					_this.isWithComputer = _this.travelAppList.isWithComputer == '1' ? true : false;
					if (_this.travelAppList.isCancel) {
						_this.isCancel = _this.travelAppList.isCancel == '0' ? 1 : 0
					}
					if (_this.travelAppList.startDate && _this.travelAppList.endDate) {
						_this.isdate = false;
						_this.day = _this.getDistanceDays(_this.travelAppList.startDate, _this.travelAppList.endDate);
					}
				}
			}
		},
		methods: {
			nextStep(btnDef, callback){
				let isvoide= false;
				console.log(this.travelAppList.fileNo)
				isvoide = this.nextapp();
				if(isvoide){
					return callback(2);
				}
				callback("");
			},
			//审批和驳回-工作流点击"提交"时触发此函数，返回:空字符串:工作流继续提交，返回"具体错误信息":工作流不提交
			rejectWorkflow(btnDef) {
				return "";
			},
			//作废-工作流点击"作废"时触发此函数，返回:空字符串:工作流继续提交，返回"具体错误信息":工作流不提交
			//content为作废意见
			invalidWorkflow(content) {
				return "";
			},
			//校验-工作流点击"提交"时触校验函数，返回:true校验通过，false校验不通过；
			//也可以返回具体的错误信息：空字符串，校验通过，返回具体错误信息校验不通过，同时弹出具体的错误信息。
			validateWorkflowForm(btnDef, callback) {
				if(btnDef.buttonName != "暂存"){
					if(this.wfContext.WorkflowInstinceState == 0 || this.wfContext.WorkflowInstinceState == 1 || this.wfContext.WorkflowInstinceState == 5){
						return callback("请点击下一步填写行程计划");
					}
				}
				callback("");
			},
			//暂存-工作流点击"保存"时触发此函数，返回true:工作流继续提交， false:工作流不提交
			saveWorkflow(btnDef, callback) {
				let _this= this;
				if(_this.travelTrip == "1"){//变更保存
					this.travelAppList.billStatus= "0";
					_this.$lyRequest.post("/gateway/reim/mp/dbsap/busiTripmEntity/changeBusiTrip.do", _this.travelAppList).then(result=>{
					  if(result.data && result.data.result == 1){
					    callback("", result.data.rows.billNo);
					  }else{
						callback(result.data.msg);
					  }
					});
				} else {
					this.travelAppList.billStatus= "0";
					_this.$lyRequest.post("/gateway/reim/mp/dbsap/busiTripmEntity/saveBusiTripm.do", _this.travelAppList).then(result=>{
					  if(result.data && result.data.result == 1){
					    callback("", result.data.rows.billNo);
					  }else{
						callback(result.data.msg);
					  }
					});
				}
			},
			radioChange(e) {
				this.travelAppList.isCancel = e == '0' ? '1' : '0';
			},
			nextapp() {
				let _this = this;
				if (_this.travelAppList.isWithComputer == '1') {
					if (!_this.travelAppList.computerStations) {
						_this.voideText = "computerStations";
						_this.commonApi.goAnchor('computerStations');
						_this.$api.showTip('携带电脑数不能为空');
						return false;
					} else if (!_this.travelAppList.computerEmpNm) {
						_this.voideText = "computerEmpNm";
						_this.commonApi.goAnchor('computerEmpNm');
						_this.$api.showTip('携带人不能为空');
						return false;
					}
				}
				if (_this.travelTrip && !_this.travelAppList.changeReasion) {
					_this.voideText = "changeReasion";
					_this.commonApi.goAnchor('changeReasion');
					_this.$api.showTip('变更说明不能为空');
					return false;
				} else if (!_this.travelAppList.startDate) {
					_this.voideText = "date";
					_this.commonApi.goAnchor('date');
					_this.$api.showTip('出差申请日期不能为空');
					return false;
				} else if (!_this.travelAppList.endDate) {
					_this.voideText = "date";
					_this.commonApi.goAnchor('date');
					_this.$api.showTip('出差申请日期不能为空');
					return false;
				} else if (!_this.travelAppList.tripObjective) {
					_this.voideText = "tripObjective";
					_this.commonApi.goAnchor('tripObjective');
					_this.$api.showTip('出差地址不能为空');
					return false;
				} else if (!_this.travelAppList.tripReasion) {
					_this.voideText = "tripReasion";
					_this.commonApi.goAnchor('tripReasion');
					_this.$api.showTip('出差理由不能为空');
					return false;
				} else {
					_this.voideText = "";
					_this.$emit('modifyNum', 1, _this.travelAppList);
					return true;
				}

			},
			// 开始日期选择
			dateConfirm(e) {
				this.isdate = false;
				let index = e.length - 1;
				this.datetimerange = e;
				this.travelAppList.startDate = e[0];
				this.travelAppList.endDate = e[index];
				this.day = this.getDistanceDays(this.travelAppList.startDate, this.travelAppList.endDate);
			},
			// 计算两个日期距离的天数
			getDistanceDays(date1, date2) {
				// date1例如:'2022-03-05',date2例如:'2022-03-06'
				const date1_timeStamp = new Date(date1.slice(0, 10)) - 0;
				const date2_timeStamp = new Date(date1.slice(0, 10)) - 0;
				let max = '',
					min = '';
				if (date1_timeStamp > date2_timeStamp) {
					max = date1_timeStamp;
					min = date2_timeStamp;
				} else {
					max = date2_timeStamp;
					min = date1_timeStamp;
				}
				// 例如返回:'1'
				return (max - min) / (24 * 60 * 60 * 1000) + 1;
			},
			close() {
				this.dateshow = false
			},
			//开关选择选择判断
			switchSelection(e, name) {
				let _this = this;
				_this.travelAppList[name] = e == true ? '1' : '0';
				if (_this.travelAppList.isWithComputer == '0') {
					_this.$set(_this.travelAppList, 'computerStations', '');
					_this.$set(_this.travelAppList, 'computerEmpNo', '');
					_this.$set(_this.travelAppList, 'computerEmpNm', '');
				}
			},
			//选择出差申请人
			personClick(carryJudag) {
				uni.navigateTo({
					url: '../../components/components/personnelList?carryJudag=' + carryJudag
				})
			},
			iswicth() {
				this.$api.showTip('请先选择携带电脑')
			},
		},
	}
</script>

<style lang="scss" scoped>
	view {
		font-family: pf
	}

	.custom-style {
		height: 90rpx;
		background-color: #007aff;
	}


	.bottom_setup {
		width: 100%;
		height: 160rpx;
		background-color: white;
		margin-top: 20rpx;
		padding: 35rpx 0;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;

		.bottom_white {
			width: 90%;
			margin: 0 auto;
		}
	}




	.u-textarea {
		background-color: #fafafa;
		margin: 10rpx 0;
	}

	.conton {
		margin-left: 20rpx;
		width: 340rpx;
	}

	.pdlf {
		width: 100%;
	}

	.textarea {
		display: flex;
		flex-direction: column;

		p {
			padding-left: 30rpx;
			margin-top: 20rpx;
			color: #666666;
			font-size: 30rpx;
		}

		.gup {
			margin: 50rpx 0;
			padding-left: 30rpx;
			margin-top: 20rpx;
			color: #666666;
		}
	}

	.update {
		width: 100%;
		height: 80rpx;
		border: 1px solid #007aff;
		border-radius: 4px;

		p {
			text-align: center;

			image {
				width: 40rpx;
				height: 40rpx;
				vertical-align: bottom;
			}
		}
	}
</style>
